<template>
  <div class="health-check-form">
    <div class="form-container">
      <h2>个人中心</h2>

      <p style="font-size: 20px;margin: 60px 30px;">一、从业健康证办理进度:  <el-button icon="Refresh" @click="resetQuery">刷新</el-button></p>
      <!--进度:'' | 'wait' | 'process' | 'finish' | 'error' | 'success'-->
      <el-steps style="max-width: 1000px" :active="active" align-center finish-status="success">
        <el-step title="申    报" :icon="DocumentAdd" :status="step.step1">
          <template #description>
            <span v-html="description.step1"></span>
          </template>
        </el-step>
        <el-step title="平台审核" :icon="Checked" :description="description.step2" :status="step.step2">
          <template #description>
            <span v-html="description.step2"></span>
          </template>
        </el-step>
        <el-step title="预    约" :icon="AlarmClock" :description="description.step3" :status="step.step3">
          <template #description>
            <span v-html="description.step3"></span>
          </template>
        </el-step>
        <el-step title="体    检" :icon="FirstAidKit" :description="description.step4" :status="step.step4">
          <template #description>
            <span v-html="description.step4"></span>
          </template>
        </el-step>
        <el-step title="体检结果" :icon="Monitor" :description="description.step5" :status="step.step5">
          <template #description>
            <span v-html="description.step5"></span>
          </template>
        </el-step>
        <el-step title="发    证" :icon="CreditCard" :description="description.step6" :status="step.step6">
          <template #description>
            <span v-html="description.step6"></span>
          </template>
        </el-step>
      </el-steps>

      <div class="form-actions">
        <el-button size="large" @click="goBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {AlarmClock, Checked, CreditCard, DocumentAdd, FirstAidKit, Monitor} from '@element-plus/icons-vue'
import {ref} from "vue";
import useUserStore from "@/store/modules/user.js";
import {loadUserProgress} from "@/api/employee/mine.js";
import {getCookie} from "@/api/employee/applyBaseData.js";

const userStore = useUserStore()
const step = ref({
  // step1: '',
  // step2: 'wait',
  // step3: 'process',
  // step4: 'finish',
  // step5: 'error',
  // step6: 'success'
})
const description = ref({
  // step1: '',
  // step2: 'wait',
  // step3: 'process',
  // step4: 'finish',
  // step5: 'error',
  // step6: 'success'
})
const active = ref(0);

/**
 * 加载个人进度
 */
function loadProgress() {
// 判断登录用户是系统用户还是普通用户 normal
  userStore.getInfo().then((res) => {
    // 获取登录用户类型
    const userType = res.user.userType;
    // 获取唯一识别码
    const idCard = res.user.identifyCode;
    // 获取姓名
    const nickName = res.user.nickName;

    // 获取角色
    const roles = res.roles;
    const role = roles[0];

    // 加载个人的数据
    if ('normal' === role) {
      if ("01" === userType) {
        loadUserProgress(idCard).then(result => {
          console.log(result);
          /**
           * name 体检姓名
           * idCard 身份证号
           * applyTime 申报时间
           * auditStatus 审核状态:0-待审核，1-审核通过，2-审核不通过
           * auditTime 审核时间
           * isReserve 是否预约:0=未预约,1=已预约,2=取消预约
           * createTime 预约时间
           * qualify 体检结果:0=-,1=合格,2=不合格
           * qualifyDate 体检是否合格修改日期
           * tjStatus 体检状态:0=已预约,1=体检中.2=已结束,3=已过期
           * isSendCard 是否发证:0=未发证,1=可发证,2=已发证
           */
          var applyTime = result.data.applyTime;
          var auditStatus = result.data.auditStatus;
          var auditTime = result.data.auditTime;
          var isReserve = result.data.isReserve;
          var createTime = result.data.createTime;
          var qualify = result.data.qualify;
          var qualifyDate = result.data.qualifyDate;
          var tjStatus = result.data.tjStatus;
          var isSendCard = result.data.isSendCard;

          // 申报
          if (applyTime) {
            step.value.step1 = 'success';
            description.value.step1 = '申报完成<br>' + applyTime;
          } else {
            step.value.step1 = 'progress';
            description.value.step1 = '请前往填写申报信息!';
          }

          // 审核
          if ("0"===auditStatus){
            step.value.step2 = 'finish';
            description.value.step2 = '待审核';
          }else if ("1"===auditStatus){
            step.value.step2 = 'success';
            description.value.step2 = '审核通过<br>' + auditTime;
          }else if ("2"===auditStatus){
            step.value.step2 = 'error';
            description.value.step2 = '审核不通过<br>' + auditTime;
          }

          // 预约
          if ("1"===auditStatus && "0"===isReserve){
            step.value.step3 = 'progress';
            description.value.step3 = '请前往填写预约信息!';
          }else if("1"===isReserve){
            step.value.step3 = 'success';
            description.value.step3 = '预约完成<br>' + createTime;
          }else if ("2"===isReserve){
            step.value.step3 = 'error';
            description.value.step3 = '已取消预约';
          }

          // 体检中
          if ("0"===tjStatus){
            step.value.step4 = 'progress';
            description.value.step4 = '已预约待体检';
          }else if ("1"===tjStatus){
            step.value.step4 = 'finish';
            description.value.step4 = '体检中';
          }else if ("2"===tjStatus){
            step.value.step4 = 'success';
            description.value.step4 = '已结束';
          }else if ("3"===tjStatus){
            step.value.step4 = 'error';
            description.value.step4 = '未在预约日期到检，预约过期！';
          }

          // 体检结果
          if("2"===tjStatus){
            if("0"===qualify){
              step.value.step5 = 'progress';
              description.value.step5 = '待出结果';
            }else if("1"===qualify){
              step.value.step5 = 'success';
              description.value.step5 = '体检合格<br>' + qualifyDate;
            }else if("2"===qualify){
              step.value.step5 = 'error';
              description.value.step5 = '体检不合格<br>' + qualifyDate;
            }
          }

          // 发证
          if ("1"===qualify && "0"===isSendCard){
            step.value.step6 = 'progress';
            description.value.step6 = '待发证';
          }else if ("1"===isSendCard){
            step.value.step6 = 'success';
            description.value.step6 = '已发证，可下载证件';
          }else if ("2"===isSendCard){
            step.value.step6 = 'success';
            description.value.step6 = '发证完成';
          }

        })
      } else if ("02" === userType) {
        // todo 这种情况出现再开发
      }
    }
  });
}

const resetQuery = () => {
  loadProgress();
}

// 返回按钮
const goBack = () => {
  // 这里可以根据实际路由配置进行调整
  window.history.back()
}

onMounted(() => {
  loadProgress();
})

// 页面加载前跳转单点登录
onBeforeMount(() => {
  // 判断cookie中是否存在token
  const adminToken = getCookie('Admin-Token');
  // 如果不存在,先登录
  if (!adminToken) {
    const env = import.meta.env.VITE_APP_ENV
    const redirect = encodeURIComponent('/employee/mine')
    let backUrl
    if (env === 'development') {
      backUrl = encodeURIComponent(`http://127.0.0.1:18766/sso/perLogin?redirect=${redirect}`)
    } else if (env === 'production') {
      backUrl = encodeURIComponent(`http://117.157.64.139:9000/sso/perLogin?redirect=${redirect}`)
    }

    const loginUrl = `https://zwfw.gansu.gov.cn/gsjis/natural/login?appmark=lzxqcyryjktipt&backUrl=${backUrl}`
    window.location.href = loginUrl
  }
})
</script>

<style scoped>
.health-check-form {
  background-color: #f5f5f5;
  background-image: url('');
  min-height: 100vh;
  padding: 20px;
}

.form-container {
  background-color: white;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 1400px;
  margin: 0 auto;
}

h2 {
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.legal-notice p {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.form-actions {
  text-align: center;
  margin-top: 70px;
}

.el-button + .el-button {
  margin-left: 20px;
}


</style>